<template>
    <div class="layerRtb layerRtb-threecolumn">
        <three-title :title="{name:'证书'}"></three-title>
        <div class="layerRtb-scroll thinScroll" v-scrollHeight="437">
            <div class="analyItem">
                <p class="analyItemTit tx-center" :class="(stageInfo.education === undefined || stageInfo.education === '' || stageInfo.education === null) ||
                (stageInfo.certificates === undefined || stageInfo.certificates === '' || stageInfo.certificates === null) ? '' : 'analyLightGreen'">证书</p >
                <div class="analyItemCon"  v-if="flg==1">
                    <p class="col-md-6">学历： <span class="cLightGray pr8">{{ this.stageInfo.education ? this.stageInfo.education : '' }}</span> </p>
                    <p class="col-md-6">证件： <span class="cLightGray pr8">{{ this.stageInfo.certificates ? this.stageInfo.certificates : '' }}</span> </p>
                    <div class="imgbox imgbox1 col-md-3"  style="margin-top: 15px;">
                        <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/edit_img.png" title="编辑" width="20" class="fr pointer mr5" @click="flg=0">
                    </div>
                </div>
                <div class="analyItemCon" v-else>
                        <div class="textBoxtxt hide" style="display: block;">
                            <p class="col-md-6">
                                <span class="cLightGray pr8">学历</span>
                                <input type="text" class="width120 evaluateStandard" name="set_stage_info_education" v-model="education">
                            </p>
                            <!--<p class="col-md-4">
                                <span class="cLightGray pr8">证件</span>
                                <input type="text" class="width120 evaluateStandard" name="set_stage_info_certificates" value="">
                            </p>-->
                            <p class="col-md-6">
                                <span class="cLightGray pr8">证件</span>
                                <!--<input type="text" class="width120 evaluateStandard" name="set_userInfo_sex" value="">-->
                                <select name="set_stage_info_certificates" class="width80"  v-model="certificates">
                                    <option value="请选择证件"></option>
                                    <option value="建造师证">建造师证</option>
                                    <option value="造价师证">造价师证</option>
                                    <option value="安全员证">安全员证</option>
                                    <option value="电工证">电工证</option>
                                    <option value="资料员证">资料员证</option>
                                    <option value="施工员证">施工员证</option>
                                </select>
                            </p>
                        </div>
                        <div class="imgbox imgbox2 " style="margin-top: 15px;">
                            <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/save_img.png" title="保存" width="20" class="fl pointer mr5" name="update_stage_info_intention" @click="updateStageInfoByleIdFn()">
                            <img src="https://gnr.rxjy.com/hrms/static/modules/cur/images/goback_img.png" title="返回" width="20" class="fl pointer mr5" @click="flg=1">
                        </div>
                </div>
            </div>
            <!-- 学历 -->
             <div class="analyItem">
                <p class="analyItemTit tx-center">学历</p>
                <div class="analyItemCon">
                    <div class="col-md-6">
                        <!-- 学历 -->
                        <span v-if="JSON.stringify(photo56) === '{}'"  class="cLightGray col-md-2">学历</span>
                        <span class="col-md-6">
                            <rx-upload v-if="photoFlg==0 && JSON.stringify(photo56) === '{}'" :data="{id: 11,attrModelid:56}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '58px'}" @success="successUpload">
                                <div class="fl uiImgUpload uiImgUpload-gblock mr10 ">
                                    <a href="javascript:">
                                        <span type="file" value="" class="file"></span>
                                        <em class="bgIcon file-ico"></em>
                                    </a>
                                </div>
                            </rx-upload>
                            <!-- :images="photoList" -->
                            <rx-viewer v-else  class="fl">
                                <div class="clearfix">
                                    <div   class="fl mr10 look_imgHover relative tx-center"  style="width:78px;height:78px;">
                                        <img :src="photo56.attrPhoto">
                                        <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_linksm">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" ></a>
                                                <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(photo56.attr_infoid)"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="imgInfo tx-center">学历</div>
                                    </div>
                                </div>
                            </rx-viewer>
                        </span>
                    </div>
                    <!-- <div class="col-md-6">
                        <span  v-if="JSON.stringify(photo57) === '{}'" class="cLightGray col-md-2">毕业证</span>
                        <span class="col-md-6">
                            <rx-upload v-if="photoFlg==0 && JSON.stringify(photo57) === '{}'" :data="{id: 11,attrModelid:57}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '58px'}" @success="successUpload">
                                <div class="fl uiImgUpload uiImgUpload-gblock mr10 ">
                                    <a href="javascript:">
                                        <span type="file" value="" class="file"></span>
                                        <em class="bgIcon file-ico"></em>
                                    </a>
                                </div>
                            </rx-upload>
                            <rx-viewer v-else  class="fl">
                                <div class="clearfix">
                                    <div   class="fl mr10 look_imgHover fl relative tx-center"  style="width:78px;height:78px;">
                                        <img :src="photo57.attrPhoto">
                                        <div class="upload_finish_div">
                                            <div class="upload_finish_bg"></div>
                                            <div class="upload_finish_linksm">
                                                <div class="dis-il-block">
                                                    <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link"></a>
                                                    <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(photo57.attr_infoid)"></a>
                                                </div>
                                            </div>
                                        </div>
                                    <div class="imgInfo tx-center">证件正面</div>
                                    </div>
                                </div>
                            </rx-viewer>
                        </span>
                    </div> -->
                </div>
            </div>
            <!-- 学历 -->
             <div class="analyItem">
                <p class="analyItemTit tx-center">证件</p>
                <div class="analyItemCon">
                    <div class="col-md-6">
                        <span  v-if="JSON.stringify(photo57) === '{}'" class="cLightGray col-md-3">证件正面</span>
                        <!-- 毕业证 -->
                        <span class="col-md-6">
                            <rx-upload v-if="photoFlg==0 && JSON.stringify(photo57) === '{}'" :data="{id: 11,attrModelid:57}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '58px'}" @success="successUpload">
                                <div class="fl uiImgUpload uiImgUpload-gblock mr10 ">
                                    <a href="javascript:">
                                        <span type="file" value="" class="file"></span>
                                        <em class="bgIcon file-ico"></em>
                                    </a>
                                </div>
                            </rx-upload>
                            <rx-viewer v-else  class="fl">
                                <div class="clearfix">
                                    <div   class="fl mr10 look_imgHover fl relative tx-center"  style="width:78px;height:78px;">
                                        <img :src="photo57.attrPhoto">
                                        <div class="upload_finish_div">
                                            <div class="upload_finish_bg"></div>
                                            <div class="upload_finish_linksm">
                                                <div class="dis-il-block">
                                                    <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link"></a>
                                                    <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(photo57.attr_infoid)"></a>
                                                </div>
                                            </div>
                                        </div>
                                    <div class="imgInfo tx-center">证件正面</div>
                                    </div>
                                </div>
                            </rx-viewer>
                        </span>
                    </div>
                    <div class="col-md-6">
                        <!-- 证件 -->
                        <span v-if="JSON.stringify(photo58) === '{}'"  class="cLightGray col-md-3">证件反面</span>
                        <span class="col-md-6">
                            <rx-upload v-if="photoFlg==0 && JSON.stringify(photo58) === '{}'" :data="{id: 11,attrModelid:58}" :init="{class: 1, mime: 1,multi:true}" :elStyle="{width:'80px', height: '58px'}" @success="successUpload">
                                <div class="fl uiImgUpload uiImgUpload-gblock mr10 ">
                                    <a href="javascript:">
                                        <span type="file" value="" class="file"></span>
                                        <em class="bgIcon file-ico"></em>
                                    </a>
                                </div>
                            </rx-upload>
                            <!-- :images="photoList" -->
                            <rx-viewer v-else  class="fl">
                                <div class="clearfix">
                                    <div   class="fl mr10 look_imgHover relative tx-center"  style="width:78px;height:78px;">
                                        <img :src="photo58.attrPhoto">
                                        <div class="upload_finish_div">
                                        <div class="upload_finish_bg"></div>
                                        <div class="upload_finish_linksm">
                                            <div class="dis-il-block">
                                                <a href="javascript:" class="ImgBtn enlarge_viewer enlarge_link" ></a>
                                                <a href="javascript:"  class="ImgBtn delect_link" @click="delImg(photo58.attr_infoid)"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="imgInfo tx-center">证件反面</div>
                                    </div>
                                </div>
                            </rx-viewer>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="layerRtb-footer">
              <div class="analyItem">
                <p class="analyItemTit tx-center">综合</p>
                <div class="analyItemCon">
                    <p class="fl">
                        <span v-if="(stageInfo.education === undefined || stageInfo.education === '' || stageInfo.education === null) ||
                        (stageInfo.certificates === undefined || stageInfo.certificates === '' || stageInfo.certificates === null)" class="circlemark circlemark-lightRed">待</span>
                        <span v-else class="circlemark circlemark-lightGreen">全</span>
                    </p>
                </div>
            </div>
        </div>
          <transition-group class="animated faster" enter-active-class="animated faster slideInRight" leave-active-class="animated faster slideOutRight">
         </transition-group>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { updateStageInfoByleId, savePhotoByUid, getUserPhotoList, delPhotoByUid } from '../../Resources/Api/index'
export default {
    components: {
    },
    data () {
        return {
            photo56: {},
            photo57: {},
            photo58: {},
            photoFlg: 0,
            flg: 1,
            stageInfo: {}, // 用户的信息
            education: '', // 学历
            certificates: '', // 证件
            photoList: {} // 照片回显
        }
    },
    created () {
        this.stageInfo = this.$route.query.stageInfo
        this.certificates = this.stageInfo.certificates
        this.education = this.stageInfo.education
        // this.getUserListinfoPhoto()
        this.getUserPhotoList()
    },
    methods: {
        delImg (value) {
            delPhotoByUid({
                attrInfoId: value
            }).then(result => {
                if (Number(result.data.StatusCode) === 0) {
                    layer.msg('删除成功')
                    // this.getUserPhotoList()
                    // this.setUpdatePlate()
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log('删除指定照片失败' + err)
            })
        },
        // 学历照片上传
        successUpload (value) {
            savePhotoByUid({
                uid: this.leftInfo.uid,
                attrModelid: value.data.attrModelid,
                userType: 1,
                attrServerUrl: '',
                attrFileUrl: value.src
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    // this.updateStageInfo()
                    this.$message('上传成功')
                    this.getUserPhotoList()
                    // this.setUpdatePlate()
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // // 学历和毕业证回显
        // getUserListinfoPhoto () {
        //     getUserListinfoPhoto({
        //         uid: this.leftInfo.uid // this.leftInfo.uid,
        //     }).then(res => {
        //         if (res.data.StatusCode === 0) {
        //             this.photoList = res.data.Body
        //         }
        //         console.log(res.data.Body)
        //     }).catch(err => {
        //         console.log('银行卡回显getUserListinfoPhoto失败，失败原因为' + err)
        //     })
        // },
        // 照片回显
        getUserPhotoList () {
            let _this = this
            _this.photo9 = {}
            getUserPhotoList({
                uid: this.leftInfo.uid // this.leftInfo.uid,
            }).then(res => {
                if (res.data.StatusCode === 0) {
                    this.photoList = res.data.Body
                    if (this.photoList.length > 0) {
                        this.photoList.forEach(photo => {
                            if (Number(photo.attr_modelid) === 56) {
                                this.photo56 = photo
                            }
                            if (Number(photo.attr_modelid) === 57) {
                                this.photo57 = photo
                            }
                        })
                    }
                }
            }).catch(err => {
                console.log('银行卡回显getUserListinfoPhoto失败，失败原因为' + err)
            })
        },
        // 修改指定用户的学历和证件信息
        updateStageInfoByleIdFn () {
            if (this.education === null || this.education === '') {
                layer.msg('请输入学历')
                return
            }
            if (this.certificates === null || this.certificates === '') {
                layer.msg('请输入证件')
                return
            }
            updateStageInfoByleId({
                uid: this.leftInfo.uid, // 用户id
                education: this.education, // 学历
                certificates: this.certificates // 证件
            }).then(result => {
                if (result.data.StatusCode === 0) {
                    layer.msg('提交成功')
                    this.$router.push(this.$route.matched[1].path)
                }
            }).catch(err => {
                console.log('修改指定用户的学历和证件信息失败updateStageInfoByleId，异常信息：' + err)
            })
        }
    },
    computed: {
        ...mapGetters(['leftInfo'])
    },
    watch: {
    }
}

</script>
<style  scoped>
    .imgbox {
    position: absolute;
    right: 10px;
    top: 10px;
}
</style>
